<template>
  <div class="scroll-table" :style="{ height: height }">
    <div class="table-header">
      <div
        class="header-item"
        v-for="(column, index) in effectiveColumns"
        :key="index"
        :style="{ flex: column.width ? 'none' : 1, width: column.width }"
      >
        {{ column.label }}
      </div>
    </div>
    <div
      class="table-body"
      ref="tableBody"
      @mouseover="stopScroll"
      @mouseleave="startScroll"
    >
      <div
        v-if="effectiveData.length > 0"
        class="scroll-content"
        ref="scrollContent"
      >
        <!-- 原始数据 -->
        <div
          class="table-row"
          v-for="(item, index) in effectiveData"
          :key="'original-' + index"
          :class="{ 'row-even': index % 2 === 0 }"
        >
          <div
            class="table-cell"
            v-for="(column, cellIndex) in effectiveColumns"
            :key="cellIndex"
            :style="{ flex: column.width ? 'none' : 1, width: column.width }"
          >
            {{ item[column.prop] }}
          </div>
        </div>
        <!-- 克隆数据用于无缝滚动 -->
        <div
          class="table-row"
          v-for="(item, index) in effectiveData"
          :key="'clone-' + index"
          :class="{ 'row-even': index % 2 === 0 }"
        >
          <div
            class="table-cell"
            v-for="(column, cellIndex) in effectiveColumns"
            :key="cellIndex"
            :style="{ flex: column.width ? 'none' : 1, width: column.width }"
          >
            {{ item[column.prop] }}
          </div>
        </div>
      </div>
      <div v-else class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollTable',
  props: {
    height: {
      type: String,
      default: '1.4167rem',
    },
    scrolListCloums: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    speed: {
      type: Number,
      default: 50,
    },
    autoScroll: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      defaultColumns: [
        { label: '排序', prop: 'rank', width: '80px' },
        { label: '停车场', prop: 'name', flex: 1 },
        { label: '订单数(个)', prop: 'score', width: '100px' },
        { label: '应收金额(元)', prop: 'date1', width: '120px' },
        { label: '实收金额(元)', prop: 'date2', width: '120px' },
      ],
      scrollSpeed: this.speed,
      timer: null,
    };
  },

  computed: {
    effectiveColumns() {
      return this.scrolListCloums.length > 0
        ? this.scrolListCloums
        : this.defaultColumns;
    },
    effectiveData() {
      return this.tableData;
    },
  },
  methods: {
    // 开始滚动
    startScroll() {
      if (this.timer || !this.autoScroll || this.tableData.length === 0) return;

      this.timer = setInterval(() => {
        const tableBody = this.$refs.tableBody;
        if (!tableBody) return;
        if (tableBody.scrollTop >= tableBody.scrollHeight / 2) {
          tableBody.scrollTop = 0;
        } else {
          tableBody.scrollTop += 1;
        }
      }, this.scrollSpeed);
    },

    stopScroll() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },

    resetScroll() {
      if (this.$refs.tableBody) {
        this.$refs.tableBody.scrollTop = 0;
      }
    },
  },

  watch: {
    tableData: {
      handler(newVal) {
        this.resetScroll();
        this.stopScroll();

        if (newVal.length > 0 && this.autoScroll) {
          this.$nextTick(() => {
            this.startScroll();
          });
        }
      },
      deep: true,
    },

    speed(newVal) {
      this.scrollSpeed = newVal;
      if (this.timer) {
        this.stopScroll();
        this.startScroll();
      }
    },

    autoScroll(newVal) {
      if (newVal) {
        this.startScroll();
      } else {
        this.stopScroll();
      }
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.resetScroll();
      if (this.autoScroll && this.tableData.length > 0) {
        this.startScroll();
      }
    });
  },

  beforeDestroy() {
    this.stopScroll();
  },

  updated() {
    if (!this.timer && this.autoScroll && this.tableData.length > 0) {
      this.$nextTick(() => {
        this.startScroll();
      });
    }
  },
};
</script>

<style lang="less" scoped>
.scroll-table {
  width: 100%;
  height: 1.4167rem;
  padding: 0.0521rem;
  background: rgba(0, 20, 60, 0.8);
  border-radius: 0.0208rem;
  overflow: hidden;

  .table-header {
    display: flex;
    background: rgba(0, 180, 255, 0.1);
    padding: 0.0521rem 0;
    border-bottom: 0.0052rem solid rgba(0, 180, 255, 0.3);

    .header-item {
      flex: 1;
      text-align: center;
      user-select: none;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 0.0729rem;
      color: #00a8ff;
      line-height: 0.1563rem;
    }
  }

  .table-body {
    height: calc(100% - 0.2135rem);
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */

    &::-webkit-scrollbar {
      width: 0;
      display: none;
    }

    .no-data {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.0833rem;
    }

    .scroll-content {
      position: relative;
      will-change: transform; // 优化滚动性能
    }

    .table-row {
      display: flex;
      height: 0.2083rem; // 固定行高
      line-height: 0.2083rem;
      padding: 0; // 移除内边距
      margin: 0; // 移除外边距
      transition: all 0.3s;
      font-size: 0.0729rem;

      &:hover {
        background: rgba(0, 180, 255, 0.1);
        .table-cell {
          color: rgba(0, 168, 255, 1); // 鼠标悬停时改变文字颜色
        }
      }

      &.row-even {
        background: rgba(0, 20, 60, 0.3);
      }

      .table-cell {
        flex: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
